<template>
    <div class="topbar-right">
        <bi-icon data="fa-home" class="topbar-btn" @click="goHome"  ></bi-icon>
        <bi-icon data="fa-refresh" class="topbar-btn" @click="refresh" ></bi-icon>
        <bi-icon data="fa-star" class="topbar-btn"  ></bi-icon>
        <bi-icon data="fa-bell" class="topbar-btn" v-badge = "bell_new" ></bi-icon>
        
        <bi-menu body-width="200">
            <template #handle>
                <bi-picture :src="$user.photo" circle border width="35" height="35" style="margin-left: 10px; cursor: pointer;" ></bi-picture>
            </template>
            <template #header>
                <div class="user-info text-bg-info shadow">
                    <div class="nickname" v-html="$user.nickname=='超级管理员'?$user.username:$user.nickname+' '+'<span>'+$user.username+'</span>'"></div>
                    <div class="usergroup"> <bi-icon data="fa-users"></bi-icon> {{$user.groupTitle}}</div>
                </div>
            </template>
            <bi-menu-item label="个人信息" icon="fa-address-card-o" ></bi-menu-item>
            <bi-menu-item label="修改密码" icon="fa-key" @click="modifyPassword" ></bi-menu-item>
            <bi-menu-item label="日志" icon="fa-calendar" @click="$go({app:'admin',controller:'user',action:'log'})" ></bi-menu-item>
            <bi-menu-item label="退出" icon="fa-sign-out" @click="logout" ></bi-menu-item>
        </bi-menu>
        
    </div>
</template>


<script>
export default{
    data(){
        return {
            bell_new:false,
        }
    },
    methods:{
        refresh(){
            this.$confirm('您的部分习惯将被重置，确定要刷新吗？',()=>{
                this.$loading();
                
                if (top.__admin_refresh_list!=undefined ){
                    for(var i=0;i<top.__admin_refresh_list.length;i++){
                        this.$user.delLocalStorage(top.__admin_refresh_list[i]);
                    }
                }
                            
                this.$admin.userInit(()=>{
                    this.$loading(false);
                    window.location.reload();
                });
            });
        },
        goHome(){
             this.$go({app:'admin',controller:'index',action:'index'});
        },
        modifyPassword(){
            this.$admin.modifyUserPassword();
        },
        logout(){
            this.$confirm('确定要退出吗？',()=>{
               this.$go({app:'admin',controller:'user',action:'logout'})
            });
        }
    },
    mounted(){
       top.__bi_toast_update = ()=>{
            console.log('bi_toast_update');
            this.bell_new = true;
        }
    }
}
</script>


<style>
.topbar-right{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;

    
}
.topbar-right .topbar-btn{
    padding: 5px;
    cursor: pointer;
}
.user-info {
    padding: 0.5em;
    margin: 0.25em;
    border-radius: var(--bs-border-radius);
    --bs-bg-opacity:0.7;
}
.user-info .nickname{
    font-size: 16px;
    font-weight: bold;
}

.user-info .nickname span{
    font-size: 14px;
    font-weight: normal;
}
.user-info .usergroup{
    font-size: 12px;
    color:var(--bs-gray-800);
}

.user-info .usergroup .bi-icon{
    color:var(--bs-gray-700);
}
</style>